<template>
  <div>
    <h4 class="rad-txt" style="margin-top:-50px">
      <span class="abtxt1">订单</span>
      <span class="abtext">详情</span>
    </h4>
    <div class="container">
      <div class="row thumbnail center col-sm-12">
        <div class="col-sm-12 ">
          <table>
            <tr>
              <th>订单编号：</th>
              <td>{{ orderInfo.orderId }}</td>
            </tr>
            <tr>
              <th>下单时间：</th>
              <td>
                {{
                  orderInfo.orderTime
                    .toLocaleString()
                    .replace(/T/g, " ")
                    .replace(/\.[\d]{3}Z/, "")
                }}
              </td>
            </tr>
            <tr>
              <th>订单状态：</th>
              <td v-if="orderInfo.orderState == 0">未付款</td>
              <td v-if="orderInfo.orderState == 1">已付款</td>
              <td v-if="orderInfo.orderState == 2">已取消</td>
              <td v-if="orderInfo.orderState == 3">已取票</td>
              <td v-if="orderInfo.orderState == 4">已过期</td>
            </tr>
            <tr>
              <th>拥有者：</th>
              <td>{{ orderInfo.orderUser }}</td>
            </tr>
            <tr>
              <th>电影名：</th>
              <td>{{ orderInfo.movieName }}</td>
            </tr>
            <tr>
              <th>时长：</th>
              <td>{{ orderInfo.movieTime }}分钟</td>
            </tr>
            <tr>
              <th>影厅名：</th>
              <td>{{ orderInfo.hallName }}</td>
            </tr>
            <tr>
              <th>开始时间：</th>
              <td>{{ orderInfo.sessionStartTime }}</td>
            </tr>
            <tr>
              <th>结束时间：</th>
              <td>{{ orderInfo.sessionEndTime }}</td>
            </tr>
            <tr>
              <th>座位：</th>
              <td v-for="(item, i) in orderInfo.seats" :key="i">{{ item }}</td>
            </tr>
          </table>
        </div>

        <div class="col-sm-12 ">
          <table>
            <tr>
              <th></th>
              <th></th>
              <th>影票张数：</th>
              <td>{{ orderInfo.seats.length }}张</td>
              <th>订单总价：</th>
              <td>
                <span class="text-danger">{{ orderInfo.orderAllprice }}元</span>
              </td>
            </tr>
          </table>
        </div>
      </div>
      <div></div>
      <div
        v-if="orderInfo.orderState == 0"
        class="col-sm-offset-7 col-sm-5"
        style="padding: 30px;"
      >
        <div class="col-sm-6  btn btn-success btn-block" @click="payment()">
          点击支付
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ShowSingleOrder",
  data() {
    return {
      orderInfo: {},
      orderId: "",
      page: {},
      count: "XXX"
    };
  },
  methods: {
    payment() {
      this.$http
        .post("/order/orderInfo/pagePay", {
          orderId: this.orderId,
          returnUrl: "http://localhost:8080/#/showOrderList",
          userName: "18523599358"
        })
        .then(resp => {
          document.write(resp.data.data);
        });
    },
    findSingleOrder() {
      this.$http
        .get("/order/orderInfo/findSingleOrder?orderId=" + this.orderId)
        .then(resp => {
          this.orderInfo = resp.data.data;
        });
    }
  },
  created() {
    this.orderId = sessionStorage.getItem("singleOrderId");
    this.findSingleOrder();
  },
  mounted() {}
};
</script>

<style scoped>
@import "../../../assets/login/css/style.css";
@import "../../../assets/bootstrap-3.3.4/dist/css/bootstrap.min.css";
@import "../../../assets/Flat-UI-master/dist/css/flat-ui.min.css";

.row {
  margin-left: 20px;
  margin-right: 20px;
}
.line-center {
  line-height: 50px;
  text-align: center;
}
.row input {
  width: 50px;
}
.list-group-item:hover {
  background: #27ae60;
}
.list-group-item div:first-child:hover {
  cursor: pointer;
}
th {
  text-align: right;
  width: 170px;
}
td {
  text-align: left;
  padding: 10px;
}
.table th {
  text-align: center;
}
.table td {
  text-align: center;
}

.all {
  display: flex;
  margin-left: 150px;
}

.sidebar {
  width: 30%;
  background-color: #f0f0f0;
}

.main {
  flex: 1;
}
</style>
